<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改个人信息</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#64748B',
            accent: '#0EA5E9',
            neutral: '#F1F5F9',
            'neutral-dark': '#334155'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .form-input-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
      .card-shadow {
        @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-neutral-dark min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <span class="text-primary font-bold text-xl">教育管理系统</span>
      </div>
      <div class="flex items-center space-x-4">
        <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">
          <i class="fa fa-home"></i> 首页
        </a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">
          <i class="fa fa-bell"></i> 通知
        </a>
        <div class="relative group">
          <button class="flex items-center space-x-2 text-gray-600 hover:text-primary transition-colors duration-200">
            <i class="fa fa-user-circle"></i>
            <span>${user.name}</span>
            <i class="fa fa-chevron-down text-xs"></i>
          </button>
          <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
              <i class="fa fa-user-circle mr-2"></i>个人信息
            </a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
              <i class="fa fa-cog mr-2"></i>设置
            </a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
              <i class="fa fa-sign-out mr-2"></i>退出登录
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- 主内容区 -->
<main class="flex-grow flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">修改个人信息</h1>
      <p class="text-gray-600">更新您的账户信息和设置</p>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-xl card-shadow overflow-hidden">
      <div class="p-6 sm:p-8">
        <form action="${pageContext.request.contextPath}/student/update" method="post" class="space-y-6">
          <input type="hidden" name="uid" value="${user.uid}">

          <!-- 姓名 -->
          <div class="space-y-2">
            <label for="name" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-user mr-1"></i> 姓名
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-user"></i>
                                </span>
              <input type="text" name="name" id="name" value="${user.name}"
                     class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-300 rounded-lg text-gray-500 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200">
            </div>
          </div>

          <!-- 用户名 -->
          <div class="space-y-2">
            <label for="username" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-user-circle mr-1"></i> 用户名
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-user-circle"></i>
                                </span>
              <input type="text" name="username" id="username" value="${user.username}"
                     class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
            </div>
          </div>

          <!-- 密码 -->
          <div class="space-y-2">
            <label for="password" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-lock mr-1"></i> 密码
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </span>
              <input type="password" name="password" id="password" value="${user.password}"
                     class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
            </div>
          </div>

          <!-- 电话 -->
          <div class="space-y-2">
            <label for="number" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-phone mr-1"></i> 电话
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-phone"></i>
                                </span>
              <input type="text" name="number" id="number" value="${user.number}"
                     class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
            </div>
          </div>

          <!-- 邮箱 -->
          <div class="space-y-2">
            <label for="email" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-envelope mr-1"></i> 邮箱
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-envelope"></i>
                                </span>
              <input type="text" name="email" id="email" value="${user.email}"
                     class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
            </div>
          </div>

          <!-- 积分 -->
          <div class="space-y-2">
            <label for="scorenum" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-star mr-1"></i> 积分
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-star"></i>
                                </span>
              <input type="text" name="scorenum" id="scorenum" value="${user.scorenum}"  readonly
                     class="block w-full pl-10 pr-3 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus transition-all duration-200">
            </div>
          </div>

          <!-- 角色 -->
          <div class="space-y-2">
            <label for="role" class="block text-sm font-medium text-gray-700">
              <i class="fa fa-id-card mr-1"></i> 角色
            </label>
            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                    <i class="fa fa-id-card"></i>
                                </span>
              <select id="role" name="role"
                      class="block w-full pl-10 pr-10 py-2.5 bg-white border border-gray-300 rounded-lg form-input-focus appearance-none transition-all duration-200">
                <option value="1">学生</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="pt-2 flex flex-col sm:flex-row gap-4">
            <button type="submit"
                    class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
              <i class="fa fa-check mr-2"></i> 提交修改
            </button>
            <a href="javascript:history.back()"
               class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
              <i class="fa fa-arrow-left mr-2"></i> 返回
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <p class="text-gray-500 text-sm">© 2025 教育管理系统. 保留所有权利.</p>
      <div class="flex space-x-6 mt-4 md:mt-0">
        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
          <i class="fa fa-question-circle"></i> 帮助中心
        </a>
        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
          <i class="fa fa-file-text-o"></i> 隐私政策
        </a>
        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
          <i class="fa fa-phone"></i> 联系我们
        </a>
      </div>
    </div>
  </div>
</footer>

<!-- JavaScript -->
<script>
  // 表单输入效果
  document.querySelectorAll('input, select').forEach(input => {
    if (input.value.trim() !== '') {
      input.classList.add('border-primary');
    }

    input.addEventListener('focus', () => {
      input.classList.add('border-primary');
    });

    input.addEventListener('blur', () => {
      if (input.value.trim() === '') {
        input.classList.remove('border-primary');
      }
    });
  });

  // 平滑滚动
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();

      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
</script>
</body>
</html>
